<template>
  <div class="f-g f-c" style="overflow:auto;">
    <div class="header">
      <div class="title">社会专家
        <el-form>
      <el-form-item style="text-align: right">
        <el-button type="primary" :disabled="!selectOptions1.length" @click="onBatchSend1">批量下发</el-button>
      </el-form-item>
    </el-form>
      </div>
    </div>

    <div class="table-box">
      <el-table
        :data="professorList"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        height="200px"
        @selection-change="onSelect1"
      >
        <el-table-column :selectable="setselectable" type="selection" width="55px" label="序号" align="center" />

        <el-table-column
          v-for="item in columns1"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        >
          <template slot-scope="scope">
            <CommonStatusTag v-if="item.prop === 'receiveStatus'" :status="scope.row.receiveStatus" :status-list="receiveStatusList" />
            <span v-else> {{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="100px">
          <template slot-scope="scope">
            <el-button type="primary" v-if="scope.row.isSend === 0" @click="onSend1(scope.row)">发送账号</el-button>
            <el-button type="primary" v-if="scope.row.isSend === 2" @click="onSend2(scope.row)">重新发送</el-button>
          </template>
          </el-table-column>
      </el-table>
    </div>
    <div class="header">
      <div class="title" style="margin-top: 24px">单位
        <el-form>
      <el-form-item style="text-align: right">
        <el-button type="primary" :disabled="!selectOptions2.length" @click="onBatchSend2">批量下发</el-button>
      </el-form-item>
    </el-form></div>
    </div>


    <div class="table-box">
      <el-table
        height="200px"
        :data="deptList"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect2"
      >
        <el-table-column :selectable="setselectable" type="selection" width="55px" label="序号" align="center" />
        <el-table-column
          v-for="item in columns2"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
          :width="item.width"
        >
          <template slot-scope="scope">
            <CommonStatusTag v-if="item.prop === 'receiveStatus'" :status="scope.row.receiveStatus" :status-list="receiveStatusList" />
            <span v-else> {{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="100px">
          <template slot-scope="scope">
            <el-button type="primary" v-if="scope.row.isSend === 0" @click="onSend2(scope.row)">发送账号</el-button>
            <el-button type="primary" v-if="scope.row.isSend === 2" @click="onSend2(scope.row)">重新发送</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import { http } from '@/api'
import { MeetingUserStatus } from '@/dict'

export default {
  name: 'AcceptList',
  props: {
    currentDetail: Object
  },
  data() {
    return {
      receiveStatusList: MeetingUserStatus,
      dialogValue: false,
      columns1: [
        { prop: 'expertName', label: '专家名称' },
        { prop: 'industryName', label: '行业' },
        { prop: 'receiveStatus', label: '状态', width: '100px' },
        { prop: 'username', label: '账号' },
        { prop: 'phone', label: '手机号' },
        { prop: 'sendName', label: '发送状态' },
      ],
      columns2: [
        { prop: 'departName', label: '单位名称' },
          { prop: 'realName', label: '参会专家姓名' },
          { prop: 'realName', label: '参会专家姓名' },
          { prop: 'username', label: '账号' },
        { prop: 'mobile', label: '手机号' },
          { prop: 'receiveStatus', label: '状态', width: '100px' },
          { prop: 'sendName', label: '发送状态' },
      ],
      professorList: [],
      deptList: [],
      selectOptions1: [],
      selectOptions2: [],
      sendStates: ['未发送','已发送','发送失败']
    }
  },
  created() {
    this.getList1()
    this.getList2()
  },
  methods: {
      setselectable(row) {
        if (row.isIssued !== 2) return true
        return false
      },
    getList1() {
      http.meeting_process.professor_accept(this.currentDetail.id).then(res => {
        this.professorList = res.data
        this.professorList.forEach(el => {
          el.sendName = this.sendStates[el.isSend]
        });
      })
    },
    getList2() {
      http.meeting_process.dept_accept(this.currentDetail.id).then(res => {
        this.deptList = res.data
        this.deptList.forEach(el => {
          el.sendName = this.sendStates[el.isSend]
        })
      })
    },
    onSelect1(options) {
      this.selectOptions1 = options
    },
    onSelect2(options) {
      this.selectOptions2 = options
    },
    onBatchSend1() {
      http.meeting_process.sendAccountProfessor(this.selectOptions1.map(el => el.id)).then(res => {
        this.$message.success(res.msg)
        this.getList1()
      })
    },
    onBatchSend2() {
      http.meeting_process.sendAccountDept(this.selectOptions2.map(el => el.id)).then(res => {
        this.$message.success(res.msg)
        this.getList2()
      })
    },
    onSend1(row) {
      http.meeting_process.sendAccountProfessor([row.id]).then(res => {
        this.$message.success(res.msg)
        this.getList1()
      })
    },
    onSend2(row) {
      http.meeting_process.sendAccountDept([row.id]).then(res => {
        this.$message.success(res.msg)
        this.getList2()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>
